<%--
  Created by IntelliJ IDEA.
  User: Cc
  Date: 2020/12/30
  Time: 16:51
  To change this template use File | Settings | File Templates.
--%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" +
            request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="shortcut icon" href="<%=basePath%>static/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="<%=basePath%>static/css/font.css">
    <link rel="stylesheet" href="<%=basePath%>static/css/xadmin.css">
    <link rel="stylesheet" href="<%=basePath%>static/css/bootstrap.css">
    <script type="text/javascript" src="<%=basePath%>static/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>static/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>static/js/jqPaginator.js"></script>
    <script type="text/javascript" src="<%=basePath%>static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="<%=basePath%>static/js/xadmin.js"></script>

</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="#">用户列表</a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so">
            <input type="text" placeholder="请输入用户名" autocomplete="off" class="layui-input">
            <button class="layui-btn" type="button"><i class="layui-icon">&#xe615;</i></button>
        </form>
    </div>

    <xblock>
        <button class="layui-btn" onclick="x_admin_show('添加信息','./user-add.jsp',500,450)"><i class="layui-icon"></i>添加
        </button>
        <span class="x-right" style="line-height:40px" id="showTotal"></span>
    </xblock>
    <table class="layui-table">
        <thead>
			<tr>
				<th>ID</th>
				<th>登录名</th>
                <th>密码</th>
                <th>爱好</th>
				<th>操作</th>
			</tr>
        </thead>
        <tbody id="tab"></tbody>
		<tr>
            <td colspan="8" align="center">
                <ul class="pagination" id="pagination1"></ul>
            </td>
        </tr>
    </table>
</div>

<script>
	 $(document).ready(function enterJudge(e) {
	  $(this).keydown(function (e) {
		  if (e.which=="13" && $("#queryUserAccount").val() != ''){
			  queryUserByUserAccount();
			  return false;
		  }
	  })
	})

     //第一次执行selectAllUser函数，用于初始化参数
     //总页数
     let totalPages=0;
	 //总条数
     let totalCounts=0;
     //当前页
     let currentPage=0;
     //页面加载完成就去执行此代码，主要目的就是加载按钮，以及页面当中的Pagenum发生变化时，去后台查询是数据的方法
     $(document).ready(function () {
         // 第一次执行selectAllUser函数，用于初始化参数
         selectAllUser(-1);
         // 加载按钮
         $("#pagination1").jqPaginator({
                 //总页数
                 totalPages:totalPages,
                 //总条数
                 totalCounts:totalCounts,
                 //当前页
                 currentPage:currentPage,
                 // 首页
                 first:'<li class="class"><a href="javascript:void(0)">首页</a></li>',
                 prev:'<li class="prev"><a href="javascript:void(0)">上一页</a></li>',
                 next:'<li class="next"><a href="javascript:void(0)">下一页</a></li>',
                 last:'<li class="last"><a href="javascript:void(0)">末页</a></li>',
                 page:'<li class="page"><a href="javascript:void(0)">{{page}}</a></li>',
                 // pageNum改变执行函数，参数n其实就是pageNum
                 onPageChange: function (n) {
                     selectAllUser(n);
                 }
             })
         })

     //selectAllUser
    function selectAllUser(n) {
         //ajax请求
         $.ajax({
             //请求服务器路劲
             url:"../user/selectAllUser",
             //服务器响应数据类型
             dataType:"json",
             //提交方式
             type:"post",
             //此需求设置为同步请求
             async:false,
             //发送服务器的数据内容
             data:{
                 "pageNum":n,
                 "pageSize":5,
             },//成功访问数据函数
             success:function (data) {
                 $("#showTotal").text("共有数据："+data.total+"条")
                 //获取用户信息
                 let userList=data.list;
                 if(userList.length > 0){
                     if(n === -1){
                         totalPages=data.pages;
                         totalCounts=data.total;
                         currentPage=data.pageNum;
                     }
                     //定义一个空字符串用来拼接用户数据信息
                     let str='';
                     //通过一个for循环拼接用户数据
                     for (let i = 0; i < userList.length; i++) {
                         str += "<tr>"+
                             "<td>"+userList[i].id+"</td>"+
                             "<td>"+userList[i].username+"</td>"+
                             "<td>"+userList[i].password+"</td>"+
                             "<td>"+userList[i].myHobby+"</td>"+
                             "<td><button type='button'>delete</button>&nbsp;&nbsp;&nbsp;" +
                             "<button type='button'>update</td>"+
                             "/<tr>";
                     }
                     //把拼接好的用户数据信息字符串str，通过JQuery方法html()，填充页面tbody中
                     $("#tab").html(str);
                 }else {
                     //当数据库没有用户数据时，进行初始化
                     totalPages=1;
                     totalCounts=1;
                     currentPage=1;
                     $("#tab").html("<tr><td colspan='8' align='center'>没有用户数据，请添加</td></tr>")
                 }
             },//失败回调
             error:function () {
                 alert("服务器错误");
             }
         })
    }

</script>
</body>

</html>